import { useState, createContext, useContext } from 'react';
import ExpensiveCpn from './ExpensiveCpn'

const numCtx = createContext(0)
const updateNumCtx = createContext<any>(() => {})


export default function Demo05() {
  const [num, updateNum] = useState(0)

  return (
    <numCtx.Provider value={num}>
      <updateNumCtx.Provider value={updateNum}>
        <Middle />
      </updateNumCtx.Provider>
    </numCtx.Provider>
  )
}

function Middle() {
  return (
    <>
      <Button />
      <Show />
    </>
  )
}

function Button() {
  const updateNum = useContext(updateNumCtx)
  console.log('btn render')
  

  console.log(performance.now())
  function clickHandler() {
    console.log(performance.now())
    updateNum(Math.random())
  }

  return (
    <button onClick={clickHandler}>产生随机数</button>
  )
}

function Show() {
  const num = useContext(numCtx)
  return (
    <p>number is {num}</p>
  )
}